// src\components\Header\index.jsx
import React, { Component } from 'react'
// nanoui依赖包 可以产生不会重复的唯一id
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'
import './index.css'
export default class Header extends Component {
  static propTypes={
    addTodo:PropTypes.func.isRequired
  }
  handleKeyUp=(event)=>{
    // 结构赋值获取keyCode，target
    const {keyCode,target}=event;
    // 判断是否是用回车按键
    if(keyCode!==13) return
    // 不能输入空值
    if(target.value.trim()===''){
      alert('不能输入空值');
      return;
    }
    // 准备好一个todo对象
    const todoObj={id:nanoid(),title:target.value,done:false}
    // console.log("Header------",todoObj);
    // 将这个todoObj传递给父组件App
    this.props.addTodo(todoObj);
    // 成功添加之后清空输入框
    target.value='';
  }
  render() {
    return (
      <div className='todo-header'>
        <input onKeyUp={this.handleKeyUp} type="text" placeholder='请输入你的任务名称，按回车确认'/>
      </div>
    )
  }
}
